@use "sass:map";

.ep-weights-menu {
	.ep-weights-options {
		margin-bottom: $block-spacer;
	}

	.ep-reference-options {
		margin-bottom: $block-spacer;
		span {
			font-weight: bold;
		}

		p {
			margin-top: $block-spacer;
		}
	}

	.results-ep-table-container {
		position: relative;

		&.pending {
			overflow: hidden;
			margin: 0;
			
			.results-ep-table {
				filter: blur(2px);
			}

			.results-pending-overlay {
				display: flex;
			}
		}

		.results-pending-overlay {
			position: absolute;
			inset: 0;
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 1;
			background: rgba(0,0,0,0.5);
		}

		.results-ep-table {
			width: 100%;
			
			&.stats-type-ep .type-weight,
			&.stats-type-weight .type-ep {
				display: none;
			}

			th, td {
				&[class*="type-"] {
					text-align: right;
				}
			}

			th {
				padding-top: map.get($spacers, 2);
				padding-bottom: map.get($spacers, 2);
				padding-right: map.get($spacers, 2);
				text-align: left;
			}

			.ep-ratios {
				background-color: $table-row-even-bg;

				td {
					padding: $table-cell-padding;
				}

				.input-root {
					align-items: flex-end;
				}

				input {
					text-align: right;
					max-width: 100px;
				}

				.compute-ep {
					white-space: nowrap;
					.not-tiny { display: inline; }
					.fas {
						display: inline;
						vertical-align:middle;
					}
				}
			}

			tbody {
				tr:nth-child(even) {
					background-color: $table-row-even-bg;	
				}

				tr:nth-child(odd) {
					background-color: $table-row-odd-bg;	
				}

				td {
					padding: $table-cell-padding;
					.fas { display: inline; }
				}
			}

			.input-root {
				margin-bottom: 0;
			}

			.results-avg.notapplicable {
				padding-right: 25px;
				font-weight: bold;
			}

			.results-stdev {
				font-size: .625rem;
			}

			.col-action {
				margin-left: map.get($spacers, 1);
			}
		}
	}
}

.unused-ep {
	color: #B0B0B0 !important;
}

// Style overrides for the EP UI in tank mode
.ep-weights-menu:not(.hide-threat-metrics) {
	// Compact rendering of EP compute button
	@mixin compact-button {
		.results-ep-table-container {
			.results-ep-table {
				.not-tiny { display: none !important; }
			}
		}
	}

	// Compact rendering of number pickers
	@mixin compact-input {
		input {
			text-align: center;
			padding-left: 0;
			padding-right: 3px;
		}
	}

	// Compact table display by shrinking padding
	@mixin compact-table {
		.results-ep-table-container {
			.results-ep-table {
				padding-right: 0;
				td {
					padding-left: 0;
				}
			}
		}
	}

	// Shorten the compute EP button on very small devices
	@media (max-width: 471px) { @include compact-button; }

	// More compact EP table on mobile viewports
	@include media-breakpoint-only(xs) {
		@include compact-table;
		.ep-ratios { @include compact-input; }
	}

	// Padding obscures part of the value on these sizes
	@include media-breakpoint-between(sm,lg) {
		.ep-ratios { @include compact-input; }
	}

	// Avoid awkward line wrapping of table headers
	@include media-breakpoint-down(lg) {
		.results-ep-table {
			th[class*="type-"] {
				text-align: center;
			}
		}
	}

	// Style overrides for the expanded/experimental EP UI in tank mode
	&:not(.hide-experimental) {
		@include media-breakpoint-down(lg) {
			@include compact-button;
			@include compact-table;
			.results-ep-table {
				@include compact-input;
			}
		}
		@include media-breakpoint-only(lg) {
			.results-ep-table {
				th { padding-right: 0; }
			}
		}
	}
}
